/**
* @Author:marina
* @Date: 2025-02-12 09:54:53
* @Description:树筛选
*/

<script setup lang="ts" name="filterTree">
import { ref, watch } from 'vue'
import { ElTree } from 'element-plus'
import { store } from '@/stores/store'

const treeStore = store()

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
    children: 'children',
    label: 'label',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}

const data: Tree[] = [
    {
        id: 1,
        label: '1',
        children: [
            {
                id: 4,
                label: '1-1',
                children: [
                    {
                        id: 9,
                        label: '1-1-1.lcf',
                    },
                    {
                        id: 10,
                        label: '1-1-2.lcf',
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        label: '2',
        children: [
            {
                id: 5,
                label: '2-1',
            },
            {
                id: 6,
                label: '2-2',
            },
        ],
    },
    {
        id: 3,
        label: '3',
        children: [
            {
                id: 7,
                label: '3-1',
                children: [
                    {
                        id: 11,
                        label: '3-1-1.lcf'
                    }
                ]
            },
            {
                id: 8,
                label: '3-2',
            },
        ],
    },
]

function search() {
    treeRef.value!.filter(filterText)

    treeStore.getText()


}
</script>


<template>
    <el-input
        v-model="filterText"
        style="width: 240px"
        placeholder="Filter keyword"
    />
    <el-button @click="search">查询</el-button>
    <el-tree
        ref="treeRef"
        style="max-width: 600px"
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
    />
</template>



<style scoped></style>
